<template>
	<view style="background-color: #F4F6F7">
		<!-- 核销成功 -->
		<view class="box" v-if="!show">
			<view class="font32 fontw">
				核销订单
			</view>
			<view class="item" v-for="(item,index) in list" :key="item.id"
				style="display: flex;align-items: center;justify-content: space-between;margin-top: 24rpx;">
				<view class="" style="display: flex;flex-direction: column;">
					<view class="">
						订单号:{{item.order_code}}
					</view>
					<view class="">
						项目名称:{{item.service_name}}
					</view>
					<view class="">
						价格:￥{{item.price}}
					</view>
					<view class="">
						核销时间:{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss')}}
					</view>
					<!-- <image :src="item.work_img" mode="widthFix"
						style="width: 128rpx;border-radius: 16rpx;margin-right: 16rpx;"></image>
					<view class="font24 fontw">
						{{item.coach_name}}
					</view> -->
				</view>
				<view class="">

				</view>
			</view>
		</view>
		<view class="pages-home rel" v-if="show">
			<banner :list="detail.imgs" :margin="0" :autoplay="true" :height="400" :indicatorActiveColor="primaryColor">
			</banner>
			<view class="fill-base pd-lg">
				<view class="f-sm-title c-title text-bold">{{detail.title}}</view>
				<view
					:style="detail.material_price*1>0?'display: flex;align-items: center;justify-content: space-between;':'display: flex;justify-content: flex-end;'">
					<view class="f-caption c-caption mt-sm" v-if="detail.material_price*1>0">
						物料费 ¥{{detail.material_price}}
					</view>
					<view class="" style="width: 400rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;">
					</view>
				</view>
				<view class="flex-y-baseline f-desc c-caption mt-sm">
					<view class="flex-y-baseline flex-1">
						<view class="flex-y-baseline f-icontext c-orange text-bold mr-sm">
							<b class="f-paragraph c-orange">￥</b>
							<view class="f-big-title">
								{{detail.price}}
							</view>
						</view>
						<view class="text-delete mr-md" v-if="detail.init_price">¥{{detail.init_price}}</view>
						<view class="flex-y-baseline flex-1" v-if="detail.is_diet == 0">
							<i class="iconfont icon-shijian mr-sm" :style="{ color: primaryColor }"></i>
							{{detail.time_long}}分钟
						</view>
						<view>超{{detail.total_sale}}人选择</view>
					</view>
				</view>
			</view>
			<view class="space-md"></view>
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
				width="33.3%" height="100rpx"></tab>
			<view class="space-md"></view>
			<view class="fill-base pd-lg f-paragraph c-desc">
				<view class="c-title text-bold mb-md">{{tabList[activeIndex].title}}</view>
				<parser :html="detail[rule[activeIndex]]" @linkpress="linkpress" show-with-animation lazy-load>加载中...
				</parser>
			</view>
		</view>
		<view class="" style="height: 140rpx;"></view>
		<view class="" style="position: fixed;bottom: 0;background-color: #fff;width: 100%;padding: 30rpx;"
			v-if="!show">
			<u-button type="primary" :text="text" @click="huanqi"></u-button>
		</view>
		<view class="" style="position: fixed;bottom: 0;background-color: #fff;width: 100%;padding: 30rpx;" v-if="show">
			<u-button type="primary" :text="text" @click="hexiao"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				text: '扫码核销',
				diet: '',
				code: '',
				cId: 0,
				list: [],
				detail: {},
				show: false,
				tabList: [{
					title: '项目介绍',
					id: 0
				}, {
					title: '禁忌说明',
					id: 1,
				}, {
					title: '下单须知',
					id: 2
				}],
				rule: {
					0: 'introduce',
					1: 'explain',
					2: 'notice'
				},
				activeIndex: 0,
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor
		}),
		onLoad() {
			this.getinfo()
			this.getData()
		},
		methods: {
			async getinfo() {
				let data = await this.$api.mine.index()
				this.cId = data.coach_id
			},
			async getData() {
				let data = await this.$api.user.coachWriteOffOrder()
				console.log(data, 'data');
				this.list = data.eat_order_list
			},
			async getInfos(code) {
				let res = await this.$api.user.orderinfo({
					search_type: 'order_code',
					order_code: code
				})
				this.getService(res.service_id)
			},
			async getService(id) {
				let res = await this.$api.service.serviceInfo({
					id: id
				})
				this.detail = res
				this.text = '确认核销'
				this.show = true
			},
			linkpress(res) {
				// #ifdef APP-PLUS
				this.$util.goUrl({
					url: res.href,
					openType: 'web'
				})
				// #endif
			},
			handerTabChange(index) {
				this.activeIndex = index;
			},
			huanqi() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: 'qrCode',
					success: function(res) {
						let codeList = res.result.split('&')
						let diet = codeList[0].split('=')[1]
						let code = codeList[1].split('=')[1]
						that.code = code
						that.diet = diet
						if (diet == 0) {
							uni.showToast({
								title: '请让保养师核销',
								icon: 'error',
								duration: 1000
							})
						}
						if (diet == 1) {
							that.getInfos(code)
						}
					},
					fail: function(err) {}
				});
			},
			hexiao() {
				let that = this
				let autograph = uni.getStorageSync('autograph')
				uni.showModal({
					title: '提示',
					content: '确定核销订单号:' + that.code,
					success: async function(ress) {
						if (ress.confirm) {
							uni.request({
								url: 'https://wx.caobenjiankang.com/?i=666&m=longbing_massages_city&s=massage/app/indextreat/updateTreatOrder&urls=massage/app/indextreat/updateTreatOrder', //仅为示例，并非真实接口地址。
								data: {
									order_code: that.code,
									coach_id: that.cId,
									is_store: 1
								},
								header: {
									'autograph': autograph //自定义请求头信息
								},
								success: (res) => {
									console.log(res.data);
									if (res.data.code == 200) {
										uni.showModal({
											title: '提示',
											content: '核销成功',
											success: function(
												resd) {
												if (resd
													.confirm) {
													console
														.log(
															'用户点击确定'
														);
													// uni.navigateBack()
													that.text = '扫码核销'
													that.show = false
													that.getData()
												} else if (resd
													.cancel) {
													console
														.log(
															'用户点击取消'
														);
													// uni.navigateBack()
													that.text = '扫码核销'
													that.show = false
													that.getData()
												}
											}
										});

									} else {
										uni.showToast({
											title: res.data.error,
											icon: 'error',
											duration: 1000
										})
										that.text = '扫码核销'
										that.show = false
										that.getData()
									}
								}
							});
						} else if (ress.cancel) {
							// uni.navigateBack()
						}
					}
				});
			},
		}
	}
</script>

<style>
	.box {
		padding: 30rpx;
	}

	.item {
		padding: 16rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
	}
</style>